<template>
  <view class="form-wrapper">
  	<view class="head-box u-m-b-60 u-flex-col">
  		<view class="u-flex u-m-b-20">
  			<view class="head-title u-m-r-40 head-title-animation">账号登录</view>
  			<!-- <view class="head-title-lose head-title-line" @tap="showAuthModal('smsLogin')">短信登录</view> -->
  		</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">手机号</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				placeholder="请输入手机号"
  				@blur="checkValue($event, 'account')"
  				@input="checkValue($event, 'account')"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.account"
  				type="text"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.account || '' }}</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">密码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				placeholder="请输入密码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.password"
  				type="password"
  				@blur="checkValue($event, 'password')"
  				@input="checkValue($event, 'password')"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.password || '' }}</view>
  	</view>
  	
  	<view class="btn-groups-wrapper">
  		<button class="u-reset-button btn-primary" @tap="accountLoginSubmit">登录</button>
  		<view class="u-flex">
  			<button class="u-reset-button btn-text" @tap="showAuthModal('register')">立即注册</button>
  			<button class="u-reset-button btn-text" @tap="showAuthModal('forgotPwd')">忘记密码</button>
  		</view>
  	</view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import FormValidate from '@/utils/validate/form';
  import { checkValue, validation, validateAll, validateSubmit } from './utils'
  
  export default {
  	name: 'AccountLogin',
    props: {
      placeholderStyle: {
        type: String,
        default: '',
      },
      protocol: {
        type: Boolean,
        required: true,
      },
    },
  	data() {
  		return {
  			form: {
  				data: {
  					account: '', // 账号
  					password: '' // 密码
  				},
  				rules: {
  					account: FormValidate.account,
  					password: FormValidate.password
  				},
  				error: {
  					account: '',
  					password: ''
  				}
  			},
  		};
  	},
    computed:{
      ...mapGetters(['authType']),
    },
  	methods: {
  		...mapActions(['getUserInfo', 'showAuthModal']),
      checkValue,
      validation,
      validateAll,
      validateSubmit,
  		async accountLoginSubmit() {
  			const self = this;
        
        const { account, password } = self.form.data
  			// (await self.validateSubmit()) &&
  				self.$http(
            'user.accountLogin',
            {
              account,
              password,
            },
            '登录中...'
          )
          .then(res => {
            const { status, data, msg } = res
            if (status === 200) {
              self.getUserInfo(data.token);
              self.$u.toast(msg);
            }
          });
  		},
  	}
  };
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
